<template>
	<div id="home">
		<appVue :closeWZA="isCloseWZA()">
			<template #sectionbanner>
				<div class="imgBanner"><imgBanner></imgBanner></div>
			</template>
			<template #sectionContent>
				<div class="content"><fationImg :contentList="contentList[0]" v-if="contentList[0]"></fationImg></div>
				<div class="content"><technology :contentList="contentList[1]" v-if="contentList[1]"></technology></div>
				<div class="content"><carImg :contentList="contentList[2]" v-if="contentList[2]"></carImg></div>
				<div class="content"><starImg :contentList="contentList[3]" v-if="contentList[3]"></starImg></div>
			</template>
		</appVue>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';
export default {
	components: {
		appVue: defineAsyncComponent(() => import(rootPath + '/src/app.vue')),
		imgBanner: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/imgBanner.vue')),
		fationImg: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/fationImg.vue')),
		technology: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/technology.vue')),
		carImg: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/carImg.vue')),
		starImg: defineAsyncComponent(() => import(rootPath + '/src/components/imgChannel/starImg.vue'))
	},
	data() {
		return {
			title: '时尚',
			contentList: [],
			query: GetQueryString()
		};
	},
	mounted() {
		SEO(this.query);
		this.getContentOfChannel();
		this.$nextTick(() => {
			if (localStorage.getItem('close') == 'true') {
				setTimeout(() => {
					wuzhangai();
				}, 1000);
			}
		});
	},
	methods: {
		getContentOfChannel() {
			['ss', 'kj', 'qc', 'mx'].forEach((item, index) => {
				let query = GetQueryString();
				let param = {
					channelPaths: item,
					orderBy: 1,
					excludeTypeIdStr: ''
				};
				contentApi.fetchContentOfChannel(param, res => {
					if (res.code == '00000 00000') {
						this.contentList[index] = res.data.records;
					} else {
					}
				});
			});
		},
		isCloseWZA() {
			return localStorage.getItem('close') || false;
		}
	}
};
</script>

<style >
	#home {
		height: fit-content;
		overflow: auto;
	}
.content {
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
}
.imgBanner {
	width: 100%;
	margin-top: 110px;
}
</style>
<style>
.mhover:hover {
	color: #ff3333 !important;
	cursor: pointer;
}
</style>
